<template>
  <div class="container">
    <div class="mainContent">
      <div class="header">
        <div class="headerTitle">{{ hotNewsDetail.title }}</div>
        <div class="headerMsg">
          <div class="time">{{ newsCreateTime }}</div>
          <div class="clickNum">
            <img src="/static/images/eyes.png" alt="">
            <div class="num">{{ hotNewsDetail.view }}</div>
          </div>
        </div>
      </div>
      <div class="textContent">
        <div v-html="hotNewsDetail.content"></div>
      </div>
    </div>
  </div>  
</template>

<script>
export default {
  data () {
    return {
      newsId: null,
      newsCreateTime: '',
      hotNewsDetail: {}
    }
  },
  onLoad (option) {
    console.log(option)
    this.newsId = option.id
    
  },
  mounted () {
    this.hotNewsDetail = {}
    this.newsCreateTime = ''
    this.getHotNewsDetail()
  },
  methods: {
    getHotNewsDetail () {
      this.$httpWX.post({
        url: '/academy/teacher/myHotspotDetails',
        data: {
          id: this.newsId
        },
        header: {
          'content-type': 'application/json' // 默认值
        }
      }).then(res => {
        console.log('hotRes', res)
        this.hotNewsDetail = res.data
        this.newsCreateTime = this.formatDate(res.data.createTime)
      })
    },
    formatDate (dates) {
      const myDate = new Date(dates)
      const year = myDate.getFullYear()
      const month = myDate.getMonth() + 1
      const date = myDate.getDate()
      const hours = myDate.getHours()
      const minutes = myDate.getMinutes() >= 10 ? myDate.getMinutes() : '0' + myDate.getMinutes()
      const seconds = myDate.getSeconds() >= 10 ? myDate.getSeconds() : '0' + myDate.getSeconds()
      return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds
    }
  }
}
</script>

<style lang="less" scoped>
  .mainContent {
    background: #fff;
    height: 100vh;
    .header {
      padding: 53rpx 38rpx 40rpx 31rpx;
      border-bottom: 1rpx solid #DCDCDC;
      .headerTitle {
        color: #171717;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 37rpx;
      }
      .headerMsg {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time {
          color: #C5C5C5;
          font-size: 28rpx;
        }
        .clickNum {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            width: 26rpx;
            height: 16rpx;
            margin-right: 10rpx;
          }
          .num {
            color: #C5C5C5;
            font-size: 26rpx;
          }
        }
      }

    }
    .textContent {
      padding: 56rpx 38rpx 50rpx 31rpx;
    }
  }
</style>
